<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p style="font-weight: bold;">店铺管理中心</p>
      <i class="fa fa-sign-out" @click="goToStoreSelector" title="选择店铺"></i>
    </header>

    <!-- 商家信息卡片 -->
    <div class="business-info-card" v-if="business">
      <div class="business-header">
        <div class="business-image-container">
          <img 
            v-if="business.businessImg && business.businessImg.startsWith('http')" 
            :src="business.businessImg" 
            alt="商家图片"
            @error="handleImageError"
          />
          <img 
            v-else-if="business.id" 
            :src="imageApi.getBusinessImageBinary(business.id)" 
            alt="商家图片"
            @error="handleImageError"
          />
          <img v-else :src="getBusinessImage(business.id)" alt="商家图片" @error="handleImageError" />
          <div class="image-upload-overlay" @click="openImageUploader">
            <i class="fa fa-camera"></i>
            <span>更换图片</span>
          </div>
        </div>
        <div class="business-basic">
          <h2>{{ business.businessName }}</h2>
          <p class="business-address">{{ business.businessAddress }}</p>
          <p class="business-explain">{{ business.businessExplain }}</p>
        </div>
      </div>
      <div class="business-stats">
        <div class="stat-item">
          <span class="stat-label">起送价</span>
          <span class="stat-value">¥{{ business.startPrice }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">配送费</span>
          <span class="stat-value">¥{{ business.deliveryPrice }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">商家ID</span>
          <span class="stat-value">{{ business.id }}</span>
        </div>
      </div>
      <div class="edit-business-btn" @click="openEditDialog">
        <i class="fa fa-edit"></i> 编辑店铺信息
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="function-menu">
      <div class="menu-item" @click="goToWallet">
        <i class="fa fa-credit-card"></i>
        <div class="menu-text">
          <h3>商家钱包</h3>
          <p>查看余额、冻结资金和交易记录</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="menu-item" @click="goToFoodManage">
        <i class="fa fa-cutlery"></i>
        <div class="menu-text">
          <h3>商品管理</h3>
          <p>管理您的商品信息、价格等</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="menu-item" @click="viewOrders">
        <i class="fa fa-list-alt"></i>
        <div class="menu-text">
          <h3>订单查看</h3>
          <p>查看您的商品订单信息</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="menu-item" @click="goToRefunds">
        <i class="fa fa-reply"></i>
        <div class="menu-text">
          <h3>退款管理</h3>
          <p>处理顾客的退款申请</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="menu-item danger" @click="confirmDeleteBusiness">
        <i class="fa" :class="isDeleting ? 'fa-spinner fa-spin' : 'fa-trash'"></i>
        <div class="menu-text">
          <h3>{{ isDeleting ? '删除中...' : '删除店铺' }}</h3>
          <p>将此店铺标记为已删除（不可恢复）</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>

    </div>

    <!-- 快速统计 -->
    <div class="quick-stats" v-if="foodCount >= 0">
      <div class="stats-header">
        <h3>商品统计</h3>
      </div>
      <div class="stats-content">
        <div class="stats-item">
          <span class="stats-number">{{ foodCount }}</span>
          <span class="stats-label">商品总数</span>
        </div>
        <div class="stats-item">
          <span class="stats-number">{{ business?.monthlySales || 0 }}</span>
          <span class="stats-label">月销量</span>
        </div>
      </div>
    </div>
    
    <!-- 图片上传输入 -->
    <input 
      ref="imageInput" 
      type="file" 
      accept="image/*" 
      style="display:none" 
      @change="uploadBusinessImage" 
    />

    <!-- 店铺信息编辑弹窗 -->
    <div class="modal-overlay" v-if="showEditModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑店铺信息</h3>
          <i class="fa fa-times" @click="closeModal"></i>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>店铺名称：</label>
            <input 
              type="text" 
              v-model="editingBusiness.businessName" 
              placeholder="请输入店铺名称"
              maxlength="50"
            />
          </div>
          <div class="form-group">
            <label>店铺地址：</label>
            <input 
              type="text" 
              v-model="editingBusiness.businessAddress" 
              placeholder="请输入店铺地址"
              maxlength="100"
            />
          </div>
          <div class="form-group">
            <label>店铺简介：</label>
            <textarea 
              v-model="editingBusiness.businessExplain" 
              placeholder="请输入店铺简介（可选）"
              rows="3"
              maxlength="200"
            ></textarea>
          </div>
          <div class="form-group">
            <label>起送价：</label>
            <input 
              type="number" 
              v-model="editingBusiness.startPrice" 
              placeholder="请输入起送价"
              min="0"
              step="0.01"
            />
          </div>
          <div class="form-group">
            <label>配送费：</label>
            <input 
              type="number" 
              v-model="editingBusiness.deliveryPrice" 
              placeholder="请输入配送费"
              min="0"
              step="0.01"
            />
          </div>
          <div class="form-group">
            <label>备注信息：</label>
            <input 
              type="text" 
              v-model="editingBusiness.remarks" 
              placeholder="备注信息（可选）"
              maxlength="100"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-save" @click="saveBusiness" :disabled="!canSave">
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
    
    <!-- 成功提示弹窗 -->
    <div class="success-modal" v-if="showSuccessModal">
      <div class="success-content">
        <i class="fa fa-check-circle"></i>
        <h3>{{ successMessage }}</h3>
        <p>{{ successDescription }}</p>
        <button @click="closeSuccessModal">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { foodApi, imageApi, businessApi } from "@/api";
import api from "@/api";

// 导入商家图片
import sj01 from '@/assets/sj01.png'
import sj02 from '@/assets/sj02.png'
import sj03 from '@/assets/sj03.png'
import sj04 from '@/assets/sj04.png'
import sj05 from '@/assets/sj05.png'
import sj06 from '@/assets/sj06.png'
import sj07 from '@/assets/sj07.png'
import sj08 from '@/assets/sj08.png'
import sj09 from '@/assets/sj09.png'

const router = useRouter();

const business = ref(null);
const foodCount = ref(-1);
const imageInput = ref(null);
const showEditModal = ref(false);
const editingBusiness = ref({
  businessName: '',
  businessAddress: '',
  businessExplain: '',
  startPrice: 0,
  deliveryPrice: 0,
  remarks: ''
});

// 在现有的ref变量下添加
const isDeleting = ref(false);
const showSuccessModal = ref(false);
const successMessage = ref('');
const successDescription = ref('');

// 计算是否可以保存
const canSave = computed(() => {
  return editingBusiness.value.businessName.trim() !== '' && 
         editingBusiness.value.businessAddress.trim() !== '' && 
         editingBusiness.value.startPrice > 0 &&
         editingBusiness.value.deliveryPrice >= 0;
});

// 获取商家图片
const getBusinessImage = (businessId) => {
  const id = parseInt(businessId) % 9; // 使用模运算确保ID在1-9范围内
  const imageMap = {
    0: sj09,
    1: sj01, 2: sj02, 3: sj03, 4: sj04, 5: sj05,
    6: sj06, 7: sj07, 8: sj08, 9: sj09
  }
  return imageMap[id] || sj01
}

// 处理图片加载失败
const handleImageError = (event) => {
  console.warn(`商家图片加载失败，尝试使用默认图片: businessId=${business.value.id}`);
  
  // 首先尝试直接使用存储的businessImg
  if (business.value.businessImg && !business.value.businessImg.startsWith('http')) {
    try {
      const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
      event.target.src = `${apiBaseUrl}${business.value.businessImg}`;
      return;
    } catch (e) {
      console.error('尝试使用businessImg作为相对路径失败:', e);
    }
  }
  
  // 如果上面失败，使用默认图片
  event.target.src = getBusinessImage(business.value.id);
}

// 打开图片上传器
const openImageUploader = () => {
  imageInput.value.click();
}

// 上传商家图片
const uploadBusinessImage = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  try {
    // 检查文件类型
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    if (!validTypes.includes(file.type)) {
      alert('请上传有效的图片文件 (JPG, PNG, GIF, WEBP)');
      return;
    }

    // 检查文件大小
    if (file.size > 5 * 1024 * 1024) { // 5MB
      alert('图片大小不能超过5MB');
      return;
    }
    
    // 显示加载状态
    alert('正在上传图片...');
    
    // 调用上传API，传递businessId
    const result = await imageApi.uploadBusinessImage(file, business.value.id);
    console.log('上传结果:', result);
    
    if (result && result.url) {
      // 更新商家数据
      const updatedBusiness = {
        ...business.value,
        businessImg: result.url
      };
      
      // 不再需要单独更新数据库，因为上传时已经更新了二进制数据
      // 更新本地状态和存储
      business.value = updatedBusiness;
      localStorage.setItem('business', JSON.stringify(updatedBusiness));
      
      alert('商家图片更新成功!');
    } else {
      alert('上传图片失败，请重试');
    }
  } catch (error) {
    console.error('上传图片错误:', error);
    alert('上传图片失败: ' + (error.message || '未知错误'));
  } finally {
    // 重置文件输入以允许再次选择同一文件
    event.target.value = '';
  }
}

// 打开编辑弹窗
const openEditDialog = () => {
  editingBusiness.value = {
    businessName: business.value.businessName,
    businessAddress: business.value.businessAddress,
    businessExplain: business.value.businessExplain || '',
    startPrice: business.value.startPrice,
    deliveryPrice: business.value.deliveryPrice,
    remarks: business.value.remarks || ''
  };
  showEditModal.value = true;
}

// 保存商家信息
const saveBusiness = async () => {
  try {
    // 准备要发送的数据，确保数字字段正确转换为字符串
    const businessData = {
      businessName: editingBusiness.value.businessName,
      businessAddress: editingBusiness.value.businessAddress,
      businessExplain: editingBusiness.value.businessExplain,
      // 确保数字转为字符串，与后端BigDecimal类型匹配
      startPrice: String(editingBusiness.value.startPrice),
      deliveryPrice: String(editingBusiness.value.deliveryPrice),
      remarks: editingBusiness.value.remarks
    };
    
    console.log('正在保存商家信息:', businessData);
    const response = await api.put(`/api/businesses/${business.value.id}`, businessData);
    console.log('保存商家信息API响应:', response);
    
    // 正确处理响应结果
    if (response) {
      // 如果响应中包含data字段，使用它
      const updatedBusinessData = response.data || response;
      
      // 更新本地商家信息
      business.value = {
        ...business.value,
        businessName: editingBusiness.value.businessName,
        businessAddress: editingBusiness.value.businessAddress,
        businessExplain: editingBusiness.value.businessExplain,
        startPrice: editingBusiness.value.startPrice,
        deliveryPrice: editingBusiness.value.deliveryPrice,
        remarks: editingBusiness.value.remarks
      };
      
      // 更新本地存储
      localStorage.setItem('business', JSON.stringify(business.value));
      alert('商家信息更新成功!');
      closeModal();
    } else {
      throw new Error('未收到有效的API响应');
    }
  } catch (error) {
    console.error('更新商家信息失败:', error);
    alert('更新商家信息失败: ' + (error.message || '未知错误'));
  }
}

// 关闭弹窗
const closeModal = () => {
  showEditModal.value = false;
}

// 跳转到商品管理
const goToFoodManage = () => {
  router.push({ path: '/foodManage' });
};

// 查看订单
const viewOrders = () => {
  router.push({ path: '/businessOrders' });
};

// 跳转至退款管理页面
const goToRefunds = () => {
  router.push('/businessRefunds');
};

const goToWallet = () => {
  router.push('/business/wallet');
};

// 跳转到选择店铺界面
const goToStoreSelector = () => {
  router.push('/businessStoreSelector');
};

// 退出登录
const logout = () => {
  if (confirm("确定要退出登录吗？")) {
    localStorage.removeItem("business");
    localStorage.removeItem("jwt-token");
    localStorage.removeItem("user-info");
    router.push({ path: '/' });
  }
};

// 加载商品统计
const loadFoodStats = async () => {
  if (!business.value) return;
  
  try {
    // 使用新的API接口获取商家的食品列表
    const response = await foodApi.getFoodListByBusinessId(business.value.id);
    if (response && Array.isArray(response)) {
      foodCount.value = response.length;
    } else {
      foodCount.value = 0;
    }
  } catch (error) {
    console.error("加载商品统计失败:", error);
    foodCount.value = 0;
  }
};

// 删除店铺确认函数
const confirmDeleteBusiness = () => {
  if (isDeleting.value) return; // 如果正在删除中，阻止重复操作
  
  // 更详细的确认信息
  if (confirm(`确定要删除店铺"${business.value.businessName}"吗？\n\n删除后：\n1. 该店铺将被标记为已删除\n2. 店铺将不再显示在用户端\n3. 该操作无法撤销\n\n确定要继续吗？`)) {
    deleteBusiness();
  }
};

// 显示成功弹窗
const showSuccess = (message, description) => {
  successMessage.value = message;
  successDescription.value = description;
  showSuccessModal.value = true;
};

// 关闭成功弹窗
const closeSuccessModal = () => {
  showSuccessModal.value = false;
  
  // 如果是删除成功的弹窗，关闭后跳转
  if (successMessage.value === '店铺删除成功') {
    router.push({ path: '/businessStoreSelector' });
  }
};

// 删除店铺函数
const deleteBusiness = async () => {
  if (isDeleting.value) return; // 防止重复调用
  
  isDeleting.value = true;
  try {
    // 使用封装的API调用删除店铺
    await businessApi.deleteBusiness(business.value.id);
    console.log('店铺删除成功，ID:', business.value.id);

    // 清除本地存储的商家信息
    localStorage.removeItem('business');
    
    // 显示成功弹窗
    showSuccess('店铺删除成功', '店铺已被成功删除，点击确定将返回店铺选择页面');
  } catch (error) {
    console.error('删除店铺失败:', error);
    alert('删除店铺失败: ' + (error.message || '未知错误'));
  } finally {
    isDeleting.value = false; // 无论成功还是失败，都重置删除状态
  }
};

// 页面初始化
onMounted(() => {
  // 检查登录状态
  const businessInfo = JSON.parse(localStorage.getItem("business"));
  if (!businessInfo) {
    alert("请先登录！");
    router.push({ path: '/businessLogin' });
    return;
  }
  
  business.value = businessInfo;
  console.log("当前登录商家:", business.value);
  console.log("商家图片URL:", business.value.businessImg);
  
  // 如果商家对象中没有图片URL，尝试获取
  if (!business.value.businessImg) {
    try {
      // 尝试从后端获取最新商家信息（包括图片）
      api.get(`/api/businesses/${business.value.id}`)
        .then(response => {
          if (response && response.businessImg) {
            console.log("后端返回的商家图片:", response.businessImg);
            business.value.businessImg = response.businessImg;
            localStorage.setItem("business", JSON.stringify(business.value));
          }
        })
        .catch(error => console.error("获取商家信息失败:", error));
    } catch (e) {
      console.error("刷新商家图片信息错误:", e);
    }
  }
  
  // 加载商品统计
  loadFoodStats();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 14vw;
}

/* header样式 */
header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.5vw;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

header .fa-sign-out {
  position: absolute;
  right: 4vw;
  font-size: 5vw;
  cursor: pointer;
}

/* 商家信息卡片 */
.business-info-card {
  width: 90%; /* 从94%减小到90% */
  margin: 14vw auto 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  padding: 4vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box; /* 确保padding计入宽度 */
}

.business-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3vw;
}

.business-image-container {
  position: relative;
  width: 20vw;
  height: 20vw;
  margin-right: 3vw;
  flex-shrink: 0;
  border-radius: 2vw;
  overflow: hidden;
}

.business-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2vw;
}

.image-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.image-upload-overlay:hover {
  opacity: 1;
}

.image-upload-overlay i {
  font-size: 5vw;
  margin-bottom: 1vw;
}

.image-upload-overlay span {
  font-size: 2.5vw;
}

.business-basic h2 {
  font-size: 4.5vw;
  color: #333;
  margin: 0 0 1vw 0;
  word-break: break-word; /* 允许长文本自动换行 */
  max-width: 100%; /* 限制最大宽度 */
}

.business-address {
  font-size: 3vw;
  color: #0097ff;
  margin: 1vw 0;
}

.business-explain {
  font-size: 3vw;
  color: #666;
  margin: 1vw 0;
}

.business-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 3vw;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 2.8vw;
  color: #999;
  margin-bottom: 1vw;
}

.stat-value {
  display: block;
  font-size: 3.5vw;
  font-weight: bold;
  color: #333;
}

.edit-business-btn {
  margin-top: 3vw;
  padding: 2vw 0;
  background-color: #f8f8f8;
  color: #0097ff;
  text-align: center;
  border-radius: 1vw;
  font-size: 3.5vw;
  cursor: pointer;
}

.edit-business-btn:hover {
  background-color: #eef5ff;
}

/* 功能菜单 */
.function-menu {
  width: 90%; /* 从94%减小到90% */
  margin: 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  overflow: hidden;
  box-sizing: border-box; /* 确保padding计入宽度 */
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 4vw 3vw;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f8f8f8;
}

.menu-item > .fa {
  font-size: 5vw;
  color: #0097ff;
  width: 8vw;
  text-align: center;
  margin-right: 3vw;
}

.menu-item.danger {
  color: #ff6b6b; /* 删除按钮的颜色 */
  border-left: 4px solid #ff6b6b;
  background-color: #fff9f9;
}

.menu-item.danger > .fa {
  color: #ff6b6b;
}

.menu-item.danger:hover {
  background-color: #ffe5e5;
}

.menu-text {
  flex: 1;
}

.menu-text h3 {
  font-size: 3.8vw;
  color: #333;
  margin: 0 0 1vw 0;
}

.menu-text p {
  font-size: 2.8vw;
  color: #999;
  margin: 0;
}

.menu-item .fa-angle-right {
  font-size: 4vw;
  color: #ccc;
}

/* 快速统计 */
.quick-stats {
  width: 90%; /* 从94%减小到90% */
  margin: 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  padding: 4vw;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box; /* 确保padding计入宽度 */
}

.stats-header h3 {
  font-size: 4vw;
  color: #333;
  margin: 0 0 3vw 0;
  text-align: center;
}

.stats-content {
  display: flex;
  justify-content: space-around;
}

.stats-item {
  text-align: center;
}

.stats-number {
  display: block;
  font-size: 6vw;
  font-weight: bold;
  color: #0097ff;
  margin-bottom: 1vw;
}

.stats-label {
  display: block;
  font-size: 2.8vw;
  color: #666;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4vw;
}

.modal-content {
  width: 100%;
  max-width: 90vw;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 3vw;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw;
  background-color: #0097ff;
  color: #fff;
}

.modal-header h3 {
  font-size: 4.5vw;
  margin: 0;
}

.modal-header .fa-times {
  font-size: 5vw;
  cursor: pointer;
}

.modal-body {
  padding: 4vw;
  max-height: 50vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 4vw;
}

.form-group label {
  display: block;
  font-size: 3.5vw;
  color: #333;
  margin-bottom: 2vw;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 3vw;
  border: 1px solid #ddd;
  border-radius: 1vw;
  font-size: 3.5vw;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0097ff;
}

.modal-footer {
  display: flex;
  gap: 3vw;
  padding: 4vw;
  background-color: #f8f8f8;
}

.modal-footer button {
  flex: 1;
  height: 10vw;
  border: none;
  border-radius: 2vw;
  font-size: 3.8vw;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background-color: #ddd;
  color: #666;
}

.btn-save {
  background-color: #38ca73;
  color: #fff;
}

.btn-save:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 成功提示弹窗样式 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-content {
  width: 80%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.success-content i {
  font-size: 50px;
  color: #38ca73;
  margin-bottom: 10px;
}

.success-content h3 {
  font-size: 18px;
  color: #333;
  margin: 10px 0;
}

.success-content p {
  font-size: 14px;
  color: #666;
  margin: 10px 0 20px 0;
}

.success-content button {
  background-color: #38ca73;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.success-content button:hover {
  background-color: #2fb067;
}

/* 响应式适配 */
@media (max-width: 480px) {
  header {
    height: 50px;
  }
  
  .business-info-card {
    margin-top: 60px;
  }
  
  .business-image-container {
    width: 80px;
    height: 80px;
    margin-right: 12px;
  }
  
  .business-basic h2 {
    font-size: 18px;
  }
  
  .business-address, .business-explain {
    font-size: 12px;
  }
  
  .menu-item {
    padding: 16px 12px;
  }
  
  .menu-text h3 {
    font-size: 15px;
  }
  
  .menu-text p {
    font-size: 11px;
  }
  
  .image-upload-overlay i {
    font-size: 20px;
  }
  
  .image-upload-overlay span {
    font-size: 10px;
  }
}
</style> 